﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>iDrum inspired step sequencer</title>

	<script src="/ext/js/prototype.js" type="text/javascript"></script>

	<script src="/ext/js/Seq.Common.js" type="text/javascript"></script>

	<script src="/ext/js/Seq.State.js" type="text/javascript"></script>

	<script src="/ext/js/Seq.UI.js" type="text/javascript"></script>

	<script src="/ext/js/Seq.Notifications.js" type="text/javascript"></script>

	<script src="/ext/js/Seq.Viewport.js" type="text/javascript"></script>

	<script src="/ext/js/Seq.Pattern.js" type="text/javascript"></script>

	<style type="text/css">
		html
		{
			margin: 0;
			padding: 0;
			border: 0;
		}
		body
		{
			margin: 0;
			padding: 0;
			border: 0;
			background-color: #fff;
			font: 8pt Arial;
		}
		a
		{
			color: #666;
			font-weight: bold;
			text-decoration: none;
		}
		.he
		{
			background-color: #eee;
			color: #555;
			width: 100%;
			height: 60px;
			position: absolute;
			left: 0px;
			top: 0px;
		}
		.he p
		{ 
			padding: 20px;
			margin: 0;
		}
		.ob
		{
			position: absolute; 
			left: 0px;
			top: 60px;			
			width: 440px;
			height: 440px;
			background-color: #fff;
		}
		.ob .i
		{
			position: absolute;
			left: 20px;
			top: 20px;
			width: 400px;
			height: 400px;
		}
		.d
		{
			display: block;
			background-color: #eee;
			border: 1px solid #aaa;
			position: absolute;
			cursor: pointer;
		}
		.d:hover
		{
			background-color: #888;
			position: absolute;
		}
		.f2, .f1, .f0
		{
			position: absolute;
			display: block;
		}
		.f2
		{
			background-color: #444;
		}
		.f1
		{
			background-color: #666;
		}
		.f0
		{
			background-color: #888;
		}
		.bf2, .bf1, .bf0
		{
			display: block;
			position: absolute;
			cursor: pointer;
		}
		.bf2
		{
			background-color: #444;
		}
		.bf2:hover
		{
			background-color: #444;
		}
		.bf1
		{
			background-color: #888;
		}
		.bf1:hover
		{
			background-color: #888;
		}
		.bf0
		{
			background-color: #ccc;
		}
		.bf0:hover
		{
			background-color: #ccc;
		}
	</style>

	<script>

		var g_Pattern = null;
		var g_CurrentItem = -1;

		function cellClick(evt, step) {

			if (evt)
				Event.stop(evt);

			var starttime = step * 100;
			var notes = g_Pattern.getNotesByStartAndKey(starttime, 36 + g_CurrentItem);

			// här kan man dimma dom, två nivåer...

			if (notes.length == 0) {
				// skapa ny post
				g_Pattern.createNote({ from: starttime, to: starttime + 75, note: 36 + g_CurrentItem, velocity: 100 });
			}
			else if (notes.length == 1) {
				// dimma...
				for (var k = 0; k < notes.length; k++) {
					if (notes[k].velocity > 75) {
						// sätt 50
						g_Pattern.modifyNote(notes[k].id, { velocity: 50 });
					}
					else if (notes[k].velocity > 25) {
						// ta bort
						g_Pattern.deleteNote(notes[k].id);
					}
				}
			}
			else if (notes.length > 1) {
				// ta bort alla om fler än 1
				for (var k = 0; k < notes.length; k++) {
					g_Pattern.deleteNote(notes[k].id);
				}
			}

			renderGrid();
		}

		function leaveDrum(evt) {
			if (evt)
				Event.stop(evt);
			g_CurrentItem = -1;
			renderGrid();
		}

		function enterDrum(evt, n) {
			if (evt)
				Event.stop(evt);
			g_CurrentItem = n;
			renderGrid();
		}

		function renderGrid() {
			var ht = '';

			if (g_CurrentItem == -1) {

				ht += '<div class=\"he\"><p>';
				ht += 'Pick a drum<br/>';
				ht += '</p></div>';
				
				ht += '<div class=\"ob\"><div class=\"i\">';
				for (var j = 0; j < 4; j++) {
					for (var i = 0; i < 4; i++) {
						var ofs = j * 4 + i;
						var x0 = i * 100;
						var y0 = j * 100;
						ht += '<a class=\"d\" style=\"left:' + x0 + 'px;top:' + y0 + 'px;width:96px;height:96px;\" onclick=\"enterDrum(event,' + ofs + ');\">';
						for (var k = 0; k < 4; k++) {
							for (var l = 0; l < 4; l++) {
								var ofs2 = k * 4 + l;
								var notes = g_Pattern.getNotesByStartAndKey(ofs2 * 100, 36 + ofs);
								var x1 = (l * 20) + 9;
								var y1 = (k * 20) + 9;
								var vel = 0;
								if (notes.length > 1) {
									vel = 2;
								}
								else if (notes.length == 1) {
									if (notes[0].velocity > 75)
										vel = 2;
									else if (notes[0].velocity > 25)
										vel = 1;
								}
								ht += '<span class=\"f' + vel + '\" style=\"left:' + x1 + 'px;top:' + y1 + 'px;width:19px;height:19px;\"></span>';
							}
						}
						ht += '</a>';
					}
				}
				ht += '</div></div>';
			}
			else {
				ht += '<div class=\"he\" onclick=\"leaveDrum\"><p>';
				ht += 'Drum #' + g_CurrentItem + ', <a href=\"javascript:leaveDrum();\">Back</a><br/>';
				ht += '</p></div>';
				
				ht += '<div class=\"ob\" onclick=\"leaveDrum();\"><div class=\"i\">';
				for (var j = 0; j < 4; j++) {
					for (var i = 0; i < 4; i++) {
						var ofs = j * 4 + i;
						var notes = g_Pattern.getNotesByStartAndKey(ofs * 100, 36 + g_CurrentItem);
						var vel = 0;
						if (notes.length > 1) {
							vel = 2;
						}
						else if (notes.length == 1) {
							if (notes[0].velocity > 75)
								vel = 2;
							else if (notes[0].velocity > 25)
								vel = 1;
						}
						var x0 = i * 100;
						var y0 = j * 100;
						ht += '<a class=\"bf' + vel + '\" style=\"left:' + x0 + 'px;top:' + y0 + 'px;width:96px;height:96px;\" onclick=\"cellClick(event,' + ofs + ');\"></a>';
					}
				}
				ht += '</div></div>';
			}


			ht += (new Date());
			ht += '<br/><br/>';
			var allnotes = g_Pattern.getAllNotes();
			ht += allnotes.toJSON();
			ht += '<br/><br/>';
			$('grid').innerHTML = ht;
		}

		function patternChanged(pat) {
			renderGrid();
		}

		function initSeq() {
			Seq.Notifications.StartListening();
			g_Pattern = new Seq.Pattern({ onChange: patternChanged });
			g_Pattern.loadPattern(Seq.State.GetCurrentPatternID());
			g_CurrentItem = -1;
			renderGrid();
		}
		
	</script>

</head>
<body onload="initSeq();">
	iDrum step sequencer<br />
	<div id="grid">
	</div>
</body>
</html>
